<template>
  <div class="select-subsidy">
    <a-dropdown>
      <a-icon type="font-colors" />
      <a-icon type="down" />
      <a-menu slot="overlay">
        <a-menu-item
          v-for="item in projects"
          :key="item.label"
          @click="handlerChangeProject(item)"
          :class="{'ant-dropdown-menu-item-active': currentStyle.label === item.label}"
        >
          <a href="javascript:;">{{ item.label }}</a>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
  </div>
</template>

<script>
import storage from 'store'
import events from '@/utils/events'
export default {
  data () {
    return {
      projects: [
        {
          label: 'large',
          scale: 1.2
        },
        {
          label: 'default',
          scale: 1
        },
        {
          label: 'small',
          scale: 0.9
        },
        {
          label: 'mini',
          scale: 0.8
        }
      ],
      currentStyle: {
        label: 'default',
        scale: 1
      }
    }
  },
  mounted () {
    if (storage.get('style')) {
      this.handlerChangeProject(storage.get('style'))
    }
  },
  methods: {
    handlerChangeProject (item) {
      this.currentStyle = item
      document.documentElement.style.fontSize = `${16 * item.scale}px`
      storage.set('style', item)
      setTimeout(() => {
        events.trigger('update')
      }, 20)
    }
  }
}
</script>

<style lang="less" scoped>
.select-subsidy {
  margin: 0 10px;
}
.ant-dropdown-menu-item-active {
  // color: @primary-color;
}
</style>
